<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./font_4642237_ejxvkvbtkyc/iconfont.css">
  <style>
    .uldoc li {
      background-color: rgb(208, 60, 166);
      color: #fff;
    }

    .row {
      display: flex;
    }

    .nav {
      width: 1404px;
      margin: 100px auto;
      height: 110px;
    }

    .nav-in {
      height: 66px;
      flex-direction: row;
      justify-content: space-between;
      text-align: center;
      align-items: center;
    }

    .hot-tags {
      margin-right: 8px;
    }

    .tags {
      display: flex;
      flex-direction: column;
      width: 46px;
      margin-right: 24px;
      text-align: center;
    }

    .tags img {
      width: 46px;
      height: 46px;
      border-radius: 50%;
    }

    .bjt {
      background-color: red;
      width: 46px;
      height: 46px;
      border-radius: 50%;
    }

    .bjt:hover {
      opacity: 0.6;
    }

    .grid {
      display: grid;
    }

    .cates {
      flex-flow: row wrap;
      align-content: center;
      justify-content: space-around;
      border-right: 1px solid #333;
    }

    .grul {
      grid-template-columns: repeat(11, 80px);
      grid-template-rows: repeat(2, 27px);
      padding-right: 30px;
      grid-gap: 10px;
    }

    .cates li {
      width: 80px;
      height: 27px;
      background-color: rgb(247, 246, 245);
      border-radius: 8px;
      line-height: 27px;
    }

    .cates li:hover {
      background-color: rgb(235, 233, 231);
    }

    .community {
      grid-template-columns: repeat(3, 72px);
      grid-template-rows: repeat(2, 28px);
      grid-gap: 5px;
      line-height: 28px;
    }

    .item:hover {
      color: rgb(0, 195, 255);
    }
  </style>
</head>




<body>

  <!-- #第一题：根据以下标签按照图片哔站的样式完善样式 -->

  <div class="nav">
    <div class="nav-in row">
      <!-- 左侧动态热门 -->
      <div class="hot-tags row">
        <!-- 自己扒图 -->
        <div class="tags"><img src="./images/01.avif" alt=""><span>动态</span></div>
        <div class="tags">
          <div class="bjt"><i class="iconfont icon-huore" style="color: white; font-size: 30px;"></i></div>
          <span>热门</span>
        </div>
      </div>
      <!-- 中间热门类别 -->
      <div class="cates">
        <ul class="grid grul">
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
        </ul>
      </div>
      <!-- 右侧分类专栏-专栏，社区等 -->
      <div class="community grid">
        <div class="item"><span class="iconfont icon-icon-zhuanlan-zhuanlanwenzhang
          "></span><span>专栏</span></div>
        <div class="item"><span class="iconfont icon-huodongxiangqu
          "></span><span>专栏</span></div>
        <div class="item"><span class="iconfont icon-shequ"></span><span>专栏</span></div>
        <div class="item"><span class="iconfont icon-zhibomaiche
          "></span><span>专栏</span></div>
        <div class="item"><span class="iconfont icon-ketang"></span><span>专栏</span></div>
        <div class="item"><span class="iconfont icon-nav_xingerebang"></span><span>专栏</span></div>
      </div>
    </div>
  </div>

  <script>
    // #第二题：根据以下要求写出程序

    // 题目1：使用调试打印出以下数组的偶数
    let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let sums = []
    for (let i = 0; i < numbers.length; i++) {
      let sum = numbers[i] % 2
      if (sum == 0) {
        sums.push(numbers[i])
      }
    }
    console.log(sums);
    // 题目2：查找数组中的最大值和最小值，并使用调试打印出来
    let numbers2 = [45, 78, 23, 89, 14, 67]
    let max = numbers2[0]
    let min = numbers2[0]
    // for (let i = 0; i < numbers2.length; i++) {
    //   // console.log(numbers2[i]);
    //   if (max < numbers2[i]) {
    //     max = numbers2[i]
    //   }
    //   if (min > numbers2[i]) {
    //     min = numbers2[i]
    //   }
    // }
    max = Math.max.apply(null, numbers2)
    min = Math.min.apply(null, numbers2)
    console.log(max);
    console.log(min);
    // 题目3：使用for循环+字符串模板+字符拼接，把以下数组生成ui>li文档并输出到html文档中,ul的class类名为 docs

    let docs = [
      "青花瓷眼镜妞皮肤回归了～",
      "在所有键盘上使用雷蛇新功能？【免费开源小程序】",
      "头发丝，棉毛棒，木头青蛙呱呱呱，这个我是真喜欢7，ASMR",
      "今天买3斤羊肉，碳烤大块羊肉串，一口一块大肉，真香"
    ]

    // ul.innerHTML
    document.write(`<ul calss= docs>`)
    for (let i = 0; i < docs.length; i++) {
      document.write(`<li>${docs[i]}</li>`)
    }
    document.write(`</ul>`)


  </script>

  <!-- <ul class='docs'>

  </ul> -->

</body>

</html>